<template>
  <div
    class="main"
    :style="{
      backgroundColor: bgColor,
      width: '100%',
    }"
  >
    <van-skeleton title :row="20" :loading="loading">
      <div class="page-html" :style="mainStyles">
        <!-- 模板1 -->
        <div class="content" v-html="template.content"></div>
        <!-- 表单 -->
        <div v-if="template.enable_form">
          <div class="form-head">
            <h2>限时特惠</h2>
            <div class="statistics">
              <van-icon name="fire"></van-icon>
              已有<span>1456</span>人参加
            </div>
          </div>
          <appiont-form :tpl="template" />
        </div>
        <!-- 跑马灯 -->
        <div class="marquee" :style="{ opacity: loading ? 0 : 1 }">
          <van-swipe
            style="height: 50px"
            :autoplay="3000"
            :show-indicators="false"
            vertical
            loop
            :touchable="false"
          >
            <van-swipe-item v-for="item in marqueeList" :key="item.now">
              <div class="marquee-item">
                <span class="name">
                  <van-icon name="volume-o"></van-icon>
                  {{ item.name }}</span
                >
                <span>{{ item.tel }}</span>
                <span>{{ item.time }} 报名</span>
              </div>
            </van-swipe-item>
          </van-swipe>
        </div>
        <!-- 模板2 -->
        <div class="content2" v-html="template.content2"></div>
      </div>
    </van-skeleton>

    <van-popup
      v-model="formPopup"
      round
      position="bottom"
      closeable
      @close="formPopupClose"
    >
      <appiont-form
        ref="form"
        style="padding-top: 40px"
        :tpl="template"
        @confirm="formConfirm"
      />
    </van-popup>
    <!-- 页脚 -->
    <!-- <div class="page-footer" v-if="template.enable_form || template.enable_service">
					<div class="phone" v-if="template.enable_service" @click="toService">

					</div>
					<van-button
						v-if="template.enable_form"
						round
						block
						safe-area-inset-bottom
						@click="openForm"
					>
						立即报名
					</van-button>
				</div> -->
    <!-- 电话咨询 -->
    <div class="fixed-phone" v-if="template.enable_service" @click="toService">
      <img :src="phoneSvg" alt="phone" />
    </div>
  </div>
</template>
<script>
import phoneSvg from "@/assets/phone.svg";
import AppiontForm from "./components/appiont-form";
import { timeAgo, randomNum } from "@/utils";
import { isMobile } from "@/utils/validate";
import { surnameList } from "@/assets/surname";
export default {
  components: {
    AppiontForm,
  },
  data() {
    return {
      phoneSvg,
      loading: true,
      formPopup: false,
      saving: false,
      marqueeList: [],
      timer: null,
      isMobile,
      query: {},
      customer: {},
      mobile_firest_template: {},
      mobile_second_template: {},
      pc_firest_template: {},
    };
  },
  computed: {
    template() {
      if (!isMobile) {
        return this.pc_firest_template;
      }
      return this.mobile_firest_template;
    },
    bgColor() {
      return (
        this.mobile_firest_template.bg_color ||
        this.mobile_second_template.bg_color ||
        this.pc_firest_template.bg_color ||
        "#fff"
      );
    },
    mainStyles() {
      let pb = 0;
      // const { enable_service, enable_form } = this.template;
      // if (enable_service || enable_form) {
      // 	pb += 70;
      // }
      // if (enable_form) {
      // 	pb += 70;
      // }
      return {
        "padding-bottom": pb + "px",
      };
    },
  },
  mounted() {
    const { query } = this.$route;
    this.query = query;

    this.loopMarqueeList();
    this.$once("hook:beforeDestroy", () => {
      clearTimeout(this.timer);
    });
    this.getInfo();
    // this.getCus(query);
  },
  methods: {
    // 获取详情
    async getInfo() {
      const { query } = this.$route;
      const res = await this.$api
        .getAdView(query)
        .catch((e) => {
          this.$toast({
            message: e,
            position: "top",
          });
          throw e;
        })
        .finally(() => {
          this.loading = false;
        });
      let mobile_firest_template = res.mobile_firest_template || {};
      let mobile_second_template = res.mobile_second_template || {};
      let pc_firest_template = res.pc_firest_template || {};
      this.mobile_firest_template = mobile_firest_template;
      this.mobile_second_template = mobile_second_template;
      this.pc_firest_template = pc_firest_template;
      let title =
        mobile_firest_template.title ||
        mobile_second_template.title ||
        pc_firest_template.title;
      document.title = title;
    },
    // 客服信息 - 获取
    async getCus() {
      const { query } = this.$route;
      const data = await this.$api.getAdCustomer(query);
      this.customer = data;
      this.adVisit(data);
    },
    // C端 -- 客服 - 点击数 - 提交
    async adVisit() {
      const { contact, contact_type, user_id, type, id } = this.customer;
      if (!id) return;
      const { id: templateId } = this.template;
      const { query } = this.$route;
      await this.$api.adVisit({
        contact,
        contact_type,
        ad_customer_id: id,
        user_id,
        type,
        id: templateId,
        id_stage: 0,
        id_supplier: 0,
        ...query,
      });
    },
    // 轮询假数据
    loopMarqueeList() {
      this.getMarqueeList();
      this.timer = setTimeout(() => {
        this.loopMarqueeList();
      }, 49 * 3 * 1000);
    },
    // 假数据生成
    getMarqueeList() {
      let now = new Date().getTime();
      let list = [];
      let surnameLen = surnameList.length;
      for (var i = 0; i < 50; i++) {
        list.push({
          name: surnameList[randomNum(surnameLen - 1)] + "**",
          tel: this.randomTel(),
          time: timeAgo(now - Math.ceil(Math.random() * 1000 * randomNum(50))),
        });
      }
      this.marqueeList = list;
    },
    // 随机带****手机号
    randomTel() {
      var arr = [3, 4, 5, 6, 7, 8, 9];
      var len = arr.length;
      var tel = "1" + arr[randomNum(len - 1)] + randomNum(9) + "****";
      for (var i = 0; i < 4; i++) {
        tel += randomNum(9);
      }
      return tel;
    },
    openForm() {
      this.formPopup = true;
    },
    formPopupClose() {
      this.$refs.form.reset();
    },
    formConfirm() {
      this.formPopup = false;
    },
    //
    toService() {
      // window.location.href = "tel:" + this.customer.contact;
      window.location.href = "tel:15659297999";
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .van-button {
    background: #f33531;
    background-image: linear-gradient(45deg, #ff8c34, #ff1500);
    color: #fff;
    user-select: none;
  }
  .van-picker__confirm {
    color: #f33531;
  }
}
.main {
  font-size: 0.3733rem;
  min-width: 320px;
  max-width: 640px;
  overflow: auto;
  word-break: break-all;
  word-wrap: break-word;
  width: 100%;
  margin: 0 auto;
  height: auto;
  height: 100%;
}

img {
  vertical-align: middle;
  border: 0;
}
p {
  margin: 0;
}

/* 富文本区域 */
.page-html {
  width: 100vw;
  overflow-wrap: break-word;
  word-break: break-all;
  word-wrap: break-word;
  font-size: 14px;
  padding-bottom: 10px;
  img {
    width: 100%;
  }
}
/* 页脚 */
.page-footer {
  box-shadow: 0px 0px 10px #eee;
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 99;
  padding: 10px 12px;
  background: #fff;
  display: flex;
  align-items: center;
  ::v-deep .van-button {
    animation: scale 3s linear infinite;
    font-weight: 600;
    flex: 1;
    margin-left: 15px;
  }
}

.page-footer .phone,
.fixed-phone {
  width: 60px;
  height: 60px;
  background: #f33531;
  background-image: linear-gradient(45deg, #ff8c34, #ff1500);
  border-radius: 50%;
  box-shadow: 0 0 2px #ff9233;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    height: 34px;
    width: 34px;
  }
}

.page-footer .phone {
  width: 50px;
  height: 50px;
  animation: shake 5s linear infinite;
}
.fixed-phone {
  position: fixed;
  z-index: 100;
  right: 15px;
  bottom: 20%;
  animation: shake 5s linear infinite;
}

/* 跑马灯 */
.marquee {
  width: calc(100% - 30px);
  margin: 0 auto;
  background-color: rgba(235, 97, 0, 0.05);
  color: #eb6100;
  height: 50px;
  border-radius: 10px;
  opacity: 0;
  &-item {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    font-size: 16px;
    .name {
      display: flex;
      align-items: center;
      ::v-deep .van-icon {
        margin-right: 6px;
      }
    }
  }
}

.form-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #eb6100;
  margin-top: 20px;
  h2 {
    font-weight: 600;
    font-size: 24px;
    color: #8b572a;
    margin: 0;
  }
  .statistics {
    background-color: rgba(235, 97, 0, 0.05);
    padding: 6px 12px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    border-radius: 6px;
    span {
      background: #f33531;
      background-image: linear-gradient(45deg, #eb6100, #ff1500);
      color: #fff;
      margin: 0 4px;
      padding: 4px 6px;
      font-size: 18px;
      font-weight: bold;
      border-radius: 6px;
    }
  }
}
</style>
